<template>
  <view class="forward">
    <!-- 搜索框 -->
    <view class="search">
      <image src="../../static/message/message_search.png" mode=""></image>
      <view class="search-tit">搜索</view>
    </view>
    <!-- 搜索框 -->
    <!-- 最近转发 -->
    <view class="time-send">
      <view class="time-send-tit">
        最近转发
      </view>
      <!-- 头像区 -->
      <view class="people">
        <view v-for="(item,index) in 5" :key="index">
          <view class="hend">
            <image src="../../static/resort/video/img1.png" class="img1" mode=""></image>
            <image src="../../static/message/sex_woman.png" mode="" class="man"></image>
          </view>
          <view class="name">
            隔壁小美
          </view>
        </view>
      </view>
      <!-- 头像区 -->
    </view>
    <!-- 最近转发 -->
    <!-- 最近聊天 -->
    <view class="time-chat">
      <view class="time-chat-tit">
        最近聊天
      </view>
      <view class="chat-item">
        <view class="list-item" @click="show=true">
          <view class="item-left">
            <image src="../../static/message/user_three.png" class="user-left"></image>
            <view class="ab-image">
              <image src="../../static/message/sex_woman.png" mode=""></image>
            </view>
          </view>
          <view class="item-right">
            隔壁小美
          </view>
        </view>
        <view class="list-item">
          <view class="item-left">
            <image src="../../static/message/user_one.png" class="user-left"></image>
            <view class="ab-image">
              <image src="../../static/message/sex_woman.png" mode=""></image>
            </view>
          </view>
          <view class="item-right">
            老王天下第一
          </view>
        </view>
      </view>
      <!-- 模态框 -->
      <view class="modal">
        <u-modal :show="show" showCancelButton closeOnClickOverlay @confirm="confirm" @cancel="cancel" @close="close"
          cancelColor="#AAAAAA" confirmColor="#FF2A31" confirmText="发送">
          <view class="modal-content">
            <view class="modal-tit">发送给：</view>
            <view class="txt-content">
              <view class="item-left">
                <image src="../../static/message/user_three.png" class="user-left"></image>
                <view class="ab-image">
                  <image src="../../static/message/sex_woman.png" mode=""></image>
                </view>
              </view>
              <view class="item-right">
                隔壁小美
              </view>
            </view>
            <view class="labels">
              [账号]全网通告
            </view>
            <view class="message">
              <u--input placeholder="给朋友留言" border="none" v-model="input" @change="change"></u--input>
            </view>
          </view>
        </u-modal>
      </view>
      <!-- 模态框 -->
    </view>
    <!-- 最近聊天 -->
    <view class="one">
      <view class="list-item">
        <view class="item-left">
          <image src="../../static/message/two.png" class="user-left"></image>
          <view class="ab-image">
            <image src="../../static/message/sex_woman.png" mode=""></image>
          </view>
        </view>
        <view class="item-right">
          富士康~你李姐
        </view>
      </view>
    </view>

    <view class="one">
      <view class="list-item">
        <view class="item-left">
          <image src="../../static/message/two.png" class="user-left"></image>
          <view class="ab-image">
            <image src="../../static/message/sex_woman.png" mode=""></image>
          </view>
        </view>
        <view class="item-right">
          富士康~你李姐
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        show: false,
        input: ''
      }
    },
    methods: {
      confirm() {
        this.show = false
        console.log('confirm');
      },
      cancel() {
        this.show = false
        console.log('cancel');
      },
      close() {
        this.show = false
        console.log('close');
      },
      change(e) {
        console.log('change', e);
      }
    }
  }
</script>

<style lang="scss">
  .forward {

    // 搜索框
    .search {
      width: 90vw;
      margin: 30rpx auto;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 30rpx;
      padding: 10rpx 0;

      image {
        width: 30rpx;
        height: 30rpx;
        margin-right: 10rpx;
        vertical-align: middle;
      }

      .search-tit {
        color: #B6B6B6;
      }
    }

    // 最近转发
    .time-send {
      width: 90vw;
      margin: 0 auto;

      .time-send-tit {
        font-size: 32rpx;
      }

      // 头像区
      .people {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 30rpx 0;

        .hend {
          margin-right: 15rpx;
          height: 100rpx;
          position: relative;
          margin-bottom: 30rpx;

          .img1 {
            width: 120rpx;
            height: 120rpx;
          }

          .man {
            width: 28rpx;
            height: 28rpx;
            position: absolute;
            top: 95%;
            left: -5%;
          }
        }

        .name {
          width: 120rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: center;
          color: #888888;
        }

        .img2 {
          width: 120rpx;
          height: 120rpx;
        }
      }
    }

    // 最近聊天
    .time-chat {
      background-color: #fff;

      .time-chat-tit {
        font-size: 32rpx;
        padding-left: 5vw;
        padding-top: 20rpx;
      }

      .chat-item {

        .list-item {
          display: flex;
          padding: 10rpx 5vw;
          align-items: center;
          border-bottom: 1px solid #F2F2F2;

          .item-left {
            position: relative;
            width: 15vw;

            .user-left {
              width: 88rpx;
              height: 88rpx;
            }

            .ab-image {
              position: absolute;
              top: 70rpx;
              left: -5rpx;

              image {
                width: 28rpx;
                height: 28rpx;
              }
            }
          }

          .item-right {
            width: 82vw;
            font-size: 32rpx;
          }
        }
      }

      // 模态框
      .modal {
        .modal-content {
          .modal-tit {
            font-size: 32rpx;
            text-align: left;
            margin-bottom: 20rpx;
            padding: 0 5vw;
          }

          .txt-content {
            width: 75vw;
            margin: 0 auto;
            display: flex;
            padding: 10rpx 5vw;
            align-items: center;

            .item-left {
              position: relative;

              .user-left {
                width: 88rpx;
                height: 88rpx;
                margin-right: 20rpx;
              }

              .ab-image {
                position: absolute;
                top: 70rpx;
                left: -5rpx;

                image {
                  width: 28rpx;
                  height: 28rpx;
                }
              }
            }

            .item-right {
              width: 82vw;
              font-size: 32rpx;
            }

          }

          .labels {
            margin: 20rpx auto;
            padding: 0 5vw;
            box-sizing: border-box;
            color: #A6A6A6;
          }

          .message {
            color: #A6A6A6;
            width: 75vw;
            margin: 0rpx auto;
            padding: 5rpx 10rpx;
            box-sizing: border-box;
            background-color: #F4F4F4;
          }
        }
      }
    }

    .one {
      background-color: #fff;
      margin-top: 200rpx;

      .list-item {
        display: flex;
        padding: 10rpx 5vw;
        align-items: center;
        border-bottom: 1px solid #F2F2F2;

        .item-left {
          position: relative;
          width: 15vw;

          .user-left {
            width: 88rpx;
            height: 88rpx;
            border-radius: 10rpx;
          }

          .ab-image {
            position: absolute;
            top: 70rpx;
            left: -5rpx;

            image {
              width: 28rpx;
              height: 28rpx;
            }
          }
        }

        .item-right {
          width: 82vw;
          font-size: 32rpx;
        }
      }
    }
  }
</style>